
<script setup>
	
	import { ref, getCurrentInstance } from 'vue';
	import useWordHeight from '../hook/useWordHeight';
	
	
	/** 当前组件实例 */
	const { proxy } = getCurrentInstance();
	
	/** 计算容器高度 */
	const wordHeight = useWordHeight({ proxy });
	
	/** 获取节点 */
	const view = ref({});
	wordHeight.get(result => view.value = result);
	
	/** props */
	const props = defineProps({
		item: Object,
		index: Number,
		isback: Boolean,
		selected: Boolean,
		mark: Boolean,
		ischeck: {
			type: Boolean,
			default: true
		}
	});

	/** emits */
	const emits = defineEmits(['play', 'joinEvent']);

	/** click */
	function itemClick() {
		emits('play');
	};
	
	/** 加入词汇 */
	function handleJoinEvent(data){
		if(props.item.change === data && !props.isback) {
			emits('joinEvent', 0)
			return false
		};
		
		emits('joinEvent', data);
	};


</script>

<template>
	<view class="items-view flex items-center" @tap="itemClick" :class="{ selected, mark }">
		<view class="flex-1 items-word min-w-0" v-if="!view.viewHeight">
			<view class="line-1 text-30 pt-6 hidden-block-translation">{{ item.translation.includes('(') ? item.translation : `${item.translation}` }}</view>
			<view class="line-1">{{ item.word }}</view>
		</view>
		
		<view class="flex-1 items-word min-w-0" v-else :style="{ height: `${wordHeight.calculatedHeight(item.blockTranslation, view.viewHeight, view.translationHeight)}px` }">
			<view class="flex items-center">
				<view class="line-1 flex-1">{{ item.word }}</view>
				<uv-transition v-if="item.play" :show="item.play">
					<view class="mp3icon">
						<view class="item"></view>
						<view class="item"></view>
						<view class="item"></view>
						<view class="item"></view>
					</view>
				</uv-transition>
			</view>
			
			<uv-transition v-if="item.blockTranslation" :show="item.blockTranslation">
				<view class="line-1 text-30 pt-6">{{ item.translation.includes('(') ? item.translation : `${item.translation}` }}</view>
			</uv-transition>
		</view>
		
		
		<view class="flex items-center" v-if="ischeck">
			<view class="icon" :class="{ correct: item.change === 1 }" @tap.stop="handleJoinEvent(1)"><uv-icon class="flex" name="checkmark" size="28rpx" color="#fff" /></view>
			<view class="icon" :class="{ error: item.change === 2 }" @tap.stop="handleJoinEvent(2)"><uv-icon class="flex" name="close" size="28rpx" color="#fff" /></view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	@import "../style/common.scss";
</style>
